<template>
	<view class="container">
		<!-- 伦敦卡片 -->
		<view class="card-list">
			<image class="card-image" src="https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDF3Vo3iy-zUcmXadJF5oCL2iGUC9pygAC8BYAAoCv8FZM-0w8xi5UjjYE.jpeg" mode="aspectFill"></image>
			<view class="tag-container">
				<text class="city-tag">[EN. 伦敦]</text>
				<text class="promo-text">Featured Promotion</text>
			</view>
		</view>

		<!-- 迪拜卡片 -->
		<view class="card-list">
			<image class="card-image" src="https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDF3lo3i1LFhilSUNYj8G8chV-xUFC2gAC9BYAAoCv8Fa_AUyuJqE-lTYE.jpg" mode="aspectFill"></image>
			<view class="tag-container">
				<text class="city-tag">【揭幕启航】</text>
				<text class="promo-text">Grand Opening</text>
			</view>
		</view>

		<!-- 威尼斯卡片 -->
		<view class="card-list">
			<image class="card-image" src="https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEDGPFo3nz0EyquluAu8XURs1BYpmsDTQACQBkAAoCv8FaiYtX_k7EWQDYE.jpg" mode="aspectFill"></image>
			<view class="tag-container">
				<text class="city-tag">【独家推荐】</text>
				<text class="promo-text">Special Offer</text>
			</view>
		</view>
	</view>
</template>

<script>
</script>
<style lang="scss" scoped>
	.container{
		width: 90vw;
	}

	.card-list {
		position: relative;
		width: 95vw;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		margin-top: 32rpx;
		&:last-child{
			margin-bottom: 100rpx;
		}
	}

	.card-image {
		width: 100%;
		height: 232rpx;
		display: block;
	}

	.tag-container {
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.city-tag {
		font-size: 24rpx;
		color: #ffffff;
		/* background-color: rgba(0, 0, 0, 0.5); */
		padding: 6rpx 20rpx;
		border-radius: 6rpx;
		/* margin-bottom: 12rpx; */
		font-weight: 500;
	}

	.promo-text {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: bold;
		/* background-color: rgba(0, 0, 0, 0.5); */
		padding: 10rpx 24rpx;
		border-radius: 8rpx;
		letter-spacing: 2rpx;
	}
</style>